<template>
  <el-tabs value="first" type="card">
    <el-tab-pane label="工单信息" name="first">
      <el-form :model="value" :inline="true" size="small" label-width="125px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="故障类型">
              <el-select v-model="value.orderParam.faultType" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程师类别" prop="major">
              <el-select v-model="value.orderParam.major" class="input_text" :disabled="isView">
                <el-option
                  v-for="item in majors"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程师等级" prop="level">
              <el-select v-model="value.orderParam.level" class="input_text" :disabled="isView">
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="筛选方式" prop="filterOption">
              <el-select v-model="value.orderParam.filterOption" class="input_text" :disabled="isView">
                <el-option
                  v-for="item in filterOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务商" prop="supplier">
              <el-select v-model="value.orderParam.supplier" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定合同">
              <!-- <el-input v-model="value.contractId" style="width: 200px;"/>-->
              <el-select v-model="value.orderParam.contractId" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in contractOptions" :key="item.name + item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预约上门时间" prop="addriveTime">
              <el-date-picker
                v-model="value.orderParam.addriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="timestamp"
                placeholder="选择日期时间"
                style="width: 300px;"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估服务时长" prop="serviceTime">
              <el-input-number v-model.number="value.orderParam.serviceTime" :min="0" :max="999" controls-position="right" style="width: 300px;" :disabled="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所需工具">
              <el-input v-model="value.orderParam.requireTool" style="width: 300px;" :rows="4" type="textarea" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="value.orderParam.notes" style="width: 760px;" :rows="4" type="textarea" :disabled="isView" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="任务单信息" name="second">
      <el-form ref="form" :model="value" :inline="true" size="small" label-width="125px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="发起时间">
              <el-date-picker
                v-model="value.task.startTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 300px"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input v-model="value.task.customerName" class="input_text" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="任务名称">
              <el-input v-model="value.task.taskTitle" class="row_length" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="任务内容">
              <el-input v-model="value.task.taskContent" class="row_length" :rows="4" type="textarea" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="任务地区">
              <AreaSelect :default-props="value.task" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input v-model="value.task.taskAddr" class="input_text" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="value.task.linker" class="input_text" :readonly="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="value.task.cellphone" class="input_text" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="要求到场时间">
              <el-date-picker
                v-model="value.task.arriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 300px"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求完成时间">
              <el-date-picker
                v-model="value.task.finishTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 300px"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附件">
          <el-upload
            :on-error="handleError"
            :file-list="value.task.fileList"
            :on-preview="handlePreview"
            :action="imagesUploadApi"
            class="upload-demo"
            multiple
            :disabled="isView"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="value.task.notes" class="row_length" rows="4" type="textarea" :readonly="isView" />
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'
import AreaSelect from '@/components/AreaSelect'
import { EngineerMajors, EngineerLevels, filterOptions } from '@/constants/consts'

export default {
  name: 'TaskOrder',
  components: {
    AreaSelect
  },
  props: {
    value: {
      type: Object,
      required: true
    },
    serviceLevelOptions: {
      type: Array,
      required: true
    },
    faultTypeOptions: {
      type: Array,
      required: true
    },
    supplierOptions: {
      type: Array,
      required: true
    },
    contractOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    console.log(this.value)
    return {
      filterOptions,
      majors: EngineerMajors,
      levels: EngineerLevels,
      activeName: 'first',
      dialogImageUrl: '',
      dialogVisible: false,
      // serviceLevelOptions: [],
      // faultTypeOptions: [],
      // supplierOptions: [],
      isView: true,
      form: {
        customerName: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi'
    ])
  },
  methods: {
    handleError() {
      this.$emit('handleError')
    },
    handlePreview(file) {
      window.open(file.url, '_blank')
    }
  }
}
</script>

<style scoped>
.row_length {
    width: 760px
}
.input_text {
    width: 300px
}
</style>
